<template>
	<view class="container">
		<view class="total">
			<view class="label">订单金额</view>
			<view class="txt">￥{{actualPrice}}</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="pay-list">
			<view class="h">请选择支付方式</view>
			<view class="b">
				<radio-group class="radio-group" @change="radioChange">
					
					<view class="uni-list-cell" hover-class="uni-list-cell-hover"  v-for="item in providerList" :key="item.id">
						<view class="uni-list-cell-navigate">
						<view class="uni-media-list-logo">
							<label class="checkbox" >
								<radio  :value="item.id" :checked="item.checked" />
							</label>
							</view>
							<view class="uni-media-list-body" >
								<view :class="[item.className]" style="font-size: 40px;">{{item.name}}</view>
							</view>
						</view>
					</view>
				</radio-group>
				
			</view>
		</view>
		<view class="pay-btn" @click="startPay" :loading="loading">确定</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<button type="primary" @tap="weixinPay" :loading="loading">微信支付</button>
		<!-- #endif -->
		
		
	</view>
</template>

<script>
	import {payOrder} from '@/api/buy/order'
	import { appInfo } from '@/common/appinfo'

	export default {
		data() {
			return {
				orderId: 0,
				actualPrice: 0.0,
				providerList: [
				],
				loading: true,
				provider: ""
			}
		},
		onLoad:function(e) {
			this.orderId = e.orderId;
			this.actualPrice = e.actualPrice;
			
			// #ifdef APP-PLUS
			uni.getProvider({
				service: "payment",
				success: (e) => {
					this.providerList = e.provider.map((value) => {
						switch (value) {
							case 'alipay':
								this.provider =  value;
								return {
									name: '支付宝',
									id: value,
									className: "uni-icon uni-icon-alipay uni-text-info",
									checked: true,
								}
							case 'wxpay':
								return {
									name: '微信',
									id: value,
									className: "uni-icon uni-icon-weixinzhifu uni-text-green",
									checked: false,
								}
						}
						
					})
					
					console.log(JSON.stringify(this.providerList))
				},
				fail: (e) => {
					console.log("获取登录通道失败：", e);
				}
			});
			// #endif
		},
		methods: {
			startPay: function() {
				this.loading = true;
				var orderVO = {
					orderId: this.orderId,
					// #ifdef APP-PLUS
					terminalId: appInfo.deviceType,
					visitId: appInfo.deviceId,
					// #endif
					payWay: this.provider
				}
				payOrder(orderVO).then(response => {
					console.log("得到订单信息"+JSON.stringify(response) );
					if (response.status !== 200 || response.rel == false) {
						console.log("获得订单信息失败", orderInfo);
						uni.showModal({
							content: "获得订单信息失败",
							showCancel: false
						})
						return;
					}
					
					
					var data = JSON.parse(response.data);
					if(data.retCode != 'SUCCESS') {
						uni.showModal({
							content: "获得订单信息失败",
							showCancel: false
						})
						return;
					} else {
						uni.requestPayment({
							provider: this.provider,
							orderInfo: data.payParams,
							success: (e) => {
								console.log("success", e);
// 								uni.showToast({
// 									title: "感谢您的购买，您的购买是我们坚持的动力之源!"
// 								})
								uni.redirectTo({
									url: "/pages/buy/payResult?orderId="+this.orderId+"&actualPrice="+this.actualPrice+"&statusId=true"
								})
							},
							fail: (e) => {
								console.log("fail"+JSON.stringify(e));
								uni.redirectTo({
									url: "/pages/buy/payResult?orderId="+this.orderId+"&actualPrice="+this.actualPrice+"&statusId=false"
								})
							},
							complete: () => {
								this.loading = false;
							}
						})
					}
				}).catch(err => {
					uni.showToast({
						title:"支付订单出错，请重试，谢谢"
					})
				});
			
				
			},
			weixinPay() {
				console.log("发起支付");
				this.loading = true;
// 				uni.login({
// 					success: (e) => {
// 						console.log("login success", e);
// 						uni.request({
// 							url: `https://unidemo.dcloud.net.cn/payment/wx/mp?code=${e.code}&amount=0.01`,
// 							success: (res) => {
// 								console.log("pay request success", res);
// 								if (res.statusCode !== 200) {
// 									uni.showModal({
// 										content: "支付失败，请重试！",
// 										showCancel: false
// 									});
// 									return;
// 								}
// 								if (res.data.ret === 0) {
// 									console.log("得到接口prepay_id", res.data.payment);
// 									let paymentData = res.data.payment;
// 									uni.requestPayment({
// 										timeStamp: paymentData.timeStamp,
// 										nonceStr: paymentData.nonceStr,
// 										package: paymentData.package,
// 										signType: 'MD5',
// 										paySign: paymentData.paySign,
// 										success: (res) => {
// 											uni.showToast({
// 												title: "感谢您的赞助!"
// 											})
// 										},
// 										fail: (res) => {
// 											uni.showModal({
// 												content: "支付失败,原因为: " + res.errMsg,
// 												showCancel: false
// 											})
// 										},
// 										complete: () => {
// 											this.loading = false;
// 										}
// 									})
// 								} else {
// 									uni.showModal({
// 										content: res.data.desc,
// 										showCancel: false
// 									})
// 								}
// 							},
// 							fail: (e) => {
// 								console.log("fail", e);
// 								this.loading = false;
// 								uni.showModal({
// 									content: "支付失败,原因为: " + e.errMsg,
// 									showCancel: false
// 								})
// 							}
// 						})
// 					},
// 					fail: (e) => {
// 						console.log("fail", e);
// 						this.loading = false;
// 						uni.showModal({
// 							content: "支付失败,原因为: " + e.errMsg,
// 							showCancel: false
// 						})
// 					}
// 				})
			},
			radioChange: function (e) {
				this.provider =  e.detail.value;
			}
		}
	}
</script>

<style>
	.container {
		padding-top: 20upx;
	}

	.total {
		height: 104upx;
		background: #fff;
		width: 92%;
		line-height: 104upx;
		padding-left: 30upx;
		padding-right: 30upx;
	}

	.total .label {
		float: left;
	}

	.total .txt {
		float: right;
	}

	.pay-list {
		margin-top: 30upx;
		height: auto;
		width: 100%;
		overflow: hidden;
	}

	.pay-list .h {
		width: 100%;
		height: 50upx;
		line-height: 50upx;
		margin-left: 31.25upx;
		margin-bottom: 31.25upx;
	}

	.pay-list .item {
		height: 108upx;
		padding-left: 31.25upx;
		background: #fff;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f4f4f4;
	}

	.pay-list .checkbox {
		background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/checkbox-sed825af9d3-a6b8540d42.png) 0 -448upx no-repeat;
			background-size: 38upx 486upx;
		width: 40upx;
		height: 40upx;
		display: inline-block;
		vertical-align: middle;
		margin-right: 30upx;
	}

	.pay-list .checkbox.checked {
		background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/checkbox-sed825af9d3-a6b8540d42.png) 0 -192upx no-repeat;
			background-size: 38upx 486upx;
	}

	.pay-list .icon-alipay {
		display: inline-block;
		vertical-align: middle;
		background-image: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/payMethod-s3c1faebee4-d754da9c65.png);
			background-repeat: no-repeat;
		background-size: 56.25upx 189.583upx;
		margin-right: 10.5upx;
		width: 56.25upx;
		height: 56.25upx;
	}

	.pay-list .icon-net {
		display: inline-block;
		vertical-align: middle;
		background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/payMethod-s3c1faebee4-d754da9c65.png) 0 -66.7upx no-repeat;
			background-size: 56.25upx 189.583upx;
		margin-right: 10.5upx;
		width: 56.25upx;
		height: 56.25upx;
	}

	.pay-list .icon {
		display: inline-block;
		vertical-align: middle;
		margin-right: 10.5upx;
		width: 56.25upx;
		height: 56.25upx;
	}

	.pay-list .name {
		display: inline-block;
		vertical-align: middle;
		height: 56.25upx;
		line-height: 56.25upx;
	}

	.pay-btn {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 100upx;
		width: 100%;
		text-align: center;
		line-height: 100upx;
		background: #b4282d;
		color: #fff;
		font-size: 30upx;
	}

	.tips {
		height: 40upx;
		width: 92%;
		font-size: 24upx;
		color: #999;
		line-height: 40upx;
		padding-left: 30upx;
		padding-right: 30upx;
	}
	
	.uni-media-list-logo {
		width: 50upx !important;
		height: 50upx !important;
	}
	
	.uni-media-list-body {
		height: 36upx;
		line-height: 36upx;
		font-size: 28upx !important;
		justify-content: space-around;
	}
	
	.uni-media-list-text-top {
		height: 50upx !important;
		
		overflow: hidden;
	}
	
	
</style>
